<template>
    <el-dialog :model-value="dialogVisible" :title="title" width="65%" @close="handleClose" align-center>
        <span>图标从element-plus中选,会报错</span>
        <div class="container">
            <el-form ref="ruleFormRef" style="width: 100%;" :model="ruleForm" :rules="rules" label-width="auto"
                class="demo-ruleForm" status-icon>

                <el-form-item label="上级菜单" prop="parentId">
                    <el-tree-select size="large" v-model="ruleForm.parentId" :data="treeList" check-strictly
                        placeholder="上级菜单" node-key="id" :props="treeProps" :render-after-expand="false" />
                </el-form-item>

                <el-form-item size="large" label="菜单类型" prop="menuType">
                    <el-radio-group v-model="ruleForm.menuType">
                        <el-radio :value="'C'">菜单</el-radio>
                        <el-radio :value="'M'">目录</el-radio>
                        <el-radio :value="'F'">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="图标" prop="icon">
                    <el-input size="large" v-model="ruleForm.icon" type="text" autocomplete="off" />
                </el-form-item>

                <el-form-item v-show="ruleForm.menuType != 'C'" label="权限字符" prop="perms">
                    <el-input size="large" v-model="ruleForm.perms" type="text" autocomplete="off" />
                </el-form-item>

                <el-row :gutter="20">
                    <el-col :md="12" :xs="18">
                        <el-form-item label="菜单名称" prop="menuName">
                            <el-input size="large" v-model="ruleForm.menuName" type="text" autocomplete="off" />
                        </el-form-item>
                    </el-col>

                    <el-col :md="12" :xs="18">
                        <el-form-item label="显示顺序" prop="roleSort">
                            <el-input-number size="large" v-model="ruleForm.orderNum" :min="1" />
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-form-item v-show="ruleForm.menuType == 'M'" label="组件路径" prop="component">
                    <el-input size="large" v-model="ruleForm.component" />
                </el-form-item>

                <el-form-item v-show="ruleForm.menuType != 'F'" label="路由地址" prop="path">
                    <el-input size="large" v-model="ruleForm.path" />
                </el-form-item>

                <el-row :gutter="20">
                    <el-col :md="12" :xs="18">
                        <el-form-item label="菜单状态" prop="status">
                            <el-radio-group v-model="ruleForm.status">
                                <el-radio :value="0">正常</el-radio>
                                <el-radio :value="1">禁止</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :md="12" :xs="18">
                        <el-form-item label="显示状态" prop="visible">
                            <el-radio-group v-model="ruleForm.visible">
                                <el-radio :value="0">显示</el-radio>
                                <el-radio :value="1">隐藏</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <template #footer class="footer">
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleConfirm">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus'
import { useMenuStore } from '@/store/menu/index.js'
import { treeListAPI, addMenuAPI, updateMenuAPI } from '@/api';

const emits = defineEmits(['update:modelValue', 'initMenuList'])

const props = defineProps({
    id: {
        type: Number,
        default: -1
    },
    title: {
        type: String,
        default: "标题"
    },
    dialogVisible: {
        type: Boolean,
        default: false
    },
    menuInfoValue: {
        type: Object,
        default: {}
    }
})

const originalmenuData = () => ({
    id: '',
    menuName: '',
    parentId: '',
    orderNum: 1,
    path: '',
    status: 0,
    component: "",
    menuType: "C",
    icon: "",
    perms: '',
    visible: 0
})

const treeProps = {
    children: 'children',
    label: 'menuName',
}

const treeList = ref([])

let ruleForm = reactive(originalmenuData())

const getTreeList = async () => {
    const res = await treeListAPI()
    treeList.value = res
}

const handleClose = () => {

    emits('update:modelValue', false)
}

const handleConfirm = async () => {
    let res = ref()
    let rus = reactive()
    if (props.id == -1) {
        rus = await addMenuAPI(ruleForm)
        res.value = "添加成功"
    }
    else {
        rus = await updateMenuAPI(ruleForm)
        res.value = "更新成功"
    }
    if (rus != false) {
        await useMenuStore().loadAuthRouters()
        ElMessage.success(res.value)
        emits('initMenuList')
        handleClose()
    }
}

watch(
    () => props.dialogVisible,
    async () => {
        getTreeList()
        if (props.id != -1) {
            ruleForm = props.menuInfoValue
        }
    }, { deep: true, immediate: true })

const rules = reactive({
    menuName: [
        { required: true, message: 'Please input ', trigger: 'blur' },
    ],
    path: [
        { required: true, message: 'Please input ', trigger: 'blur' },
    ],
    nickName: [
        { required: true, message: 'Please input ', trigger: 'blur' },
    ],
})
</script>

<style lang="scss" scoped>
.container {
    margin: 20px 40px;
    font-family: "微软正黑体";
    font-size: 16px;
    font-weight: 800;
}

.el-dialog {
    margin: 20px;
}
</style>